<template>
  <div class="order_formlist">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <template>
      <el-table
        :data="order_formlist"
        style="width: 100%"
        @expand-change="getlocation"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
            >
              <el-form-item label="用户名">
                <span>{{ props.row.username }}</span>
              </el-form-item>
              <el-form-item label="收货地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.businesslocation }}</span>
              </el-form-item>
              <el-form-item label="店铺名称">
                <span>{{ props.row.restaurant_name }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.restaurant_id }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in titlearr"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
        </el-table-column>
      </el-table>
    </template>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="order_formcount"
        @current-change="handleCurrentChange"
        ref="pagination"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
import { getorderformlistall, getallorderformlist, getbusinessinfo, getuserinfo, getaddresse } from '@/api/list';
export default {
  data() {
    return {
      title: '订单列表',
      order_formlist: [],
      order_formcount: 0,
      userinfo: {},
      businessinfo: {},
      addresse: {},
      titlearr: [
        {
          label: '订单 ID',
          prop: 'id',
        },
        {
          label: '总价格',
          prop: 'total_amount',
        },
        {
          label: '订单状态',
          prop: 'status_bar.title',
        },
      ],
    };
  },
  methods: {
    async getorderformlist(sss) {
      const res = await getorderformlistall((sss-1)*10, 10);
      this.order_formlist = res.data;
      //   console.log(this.order_formlist);
    },
    async getorderformcount() {
      const res = await getallorderformlist();
      this.order_formcount = res.data.count;
      //   console.log(this.order_formcount);
    },
    async getbusinessinfo(id) {
      const res = await getbusinessinfo(id);
      this.businessinfo = res.data;
    //   console.log(this.businessinfo);
    },
    async getaddresse(id) {
      const res = await getaddresse(id);
      this.addresse = res.data;
    //   console.log(this.addresse);
    },
    async getuserinfo(id) {
      const res = await getuserinfo(id);
      this.userinfo = res.data;
    //   console.log(this.userinfo);
    },
    getlocation(row, expandedRows) {
      if (expandedRows.length > 0) {
        // console.log(row);
        this.getbusinessinfo(row.restaurant_id);
        row.businesslocation = this.businessinfo.address;
        this.getuserinfo(row.user_id);
        row.username = this.userinfo.username;
        this.getaddresse(row.address_id);
        row.address = this.addresse.address;
      }
    },
    handleCurrentChange(val) {
      this.getorderformlist(val)
    },
  },
  created() {
    this.getorderformlist(1);
    this.getorderformcount();
  },
};
</script>
<style lang="scss" scoped>
.order_formlist {
  width: 100%;
  .header {
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
    .el-breadcrumb {
      margin-top: 15px;
      padding-left: 10px;
    }
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    text-indent: 50px;
  }
  .el-pagination {
    margin-top: 20px;
    padding-left: 300px;
  }
}
</style>
